<template>
    <van-overlay :show="showBox" @click="() => {$emit('update:showBox', !showBox)}">
        <div class="catalog-box" @click.stop>
            <div class="box-border">
                <div class="box-title">
                    <div><a @click="() => {$emit('update:showBox', !showBox)}">{{ $t('circle_kg_13') }}</a></div>
                    <div>{{ $t('circle_kg_58') }}</div>
                    <div><a :class="{'btn-class': selectId && selectId !== -1}" @click="okSelectCatalog">{{ $t('circle_kg_14') }}</a></div>
                </div>
                <div class="box-item-list">
                    <van-loading v-if="isLoading" size="50px"/>
                    <div v-if="!isLoading && catalogList.length === 0" style="text-align: center">{{$t('no_directory_found')}}</div>
                    <van-radio-group v-model="selectId">
                        <div class="box-item" v-for="item in catalogList" :key="item.ttId" >
                            <div><van-radio :name="item.ttId" @click="clickRadio(item.ttId)"></van-radio></div>
                            <div @click="selectCatalog(item)">{{ item.ttName }}</div>
                        </div>
                    </van-radio-group>
                </div>
            </div>
        </div>
    </van-overlay>
</template>

<script>
import { Overlay, RadioGroup, Radio, Search, Loading } from 'vant';
export default {
    name: 'SelectCatalog',
    components: {
        vanOverlay: Overlay,
        vanRadioGroup: RadioGroup,
        vanRadio: Radio,
        vanSearch: Search,
        vanLoading: Loading
    },
    props: {
        showBox: {
            type: Boolean,
            default: false
        },
        defaultChecked: {
            type: Number,
            default: -1
        },
        resultName: {
            type: String,
            default: ''
        },
        wctId: {
            type: String,
            default: '-1'
        }
    },
    data() {
        return {
            selectId: -1,
            catalogList: [],
            name: '',
            isLoading: false,
            radioFlagId: -1
        };
    },
    methods: {
        getAllCatalogByWctId() {
            this.isLoading = true;
            this.$axios.get(`/app/api/trainee/work-circle/team/treenode/all/${this.wctId}`).then(res => {
                if (res.data && res.data.length > 0) {
                    this.catalogList = res.data;
                    if (this.defaultChecked !== -1) {
                        this.catalogList.forEach(item => {
                            if (item.ttId === this.defaultChecked) {
                                this.name = item.ttName;
                                this.$emit('update:resultName', this.name);
                                return false;
                            }
                        });
                    }
                }
                this.isLoading = false;
            }).catch(res => {
                this.isLoading = false;
            });
        },
        okSelectCatalog() {
            this.$emit('update:defaultChecked', this.selectId);
            this.$emit('update:resultName', this.name);
            this.$emit('update:showBox', !this.showBox);
            this.$emit('result', this.selectId);
        },
        clickRadio(id) {
            if (this.radioFlagId === -1) {
                this.radioFlagId = this.selectId;
            } else {
                if (this.selectId === this.radioFlagId) {
                    this.radioFlagId = -1;
                    this.selectId = -1;
                } else {
                    this.radioFlagId = this.selectId;
                }
            }
        },
        selectCatalog(data) {
            if (this.selectId === data.ttId) {
                this.selectId = -1;
                this.name = '';
                this.radioFlagId = -1;
            } else {
                this.selectId = data.ttId;
                this.name = data.ttName;
                this.radioFlagId = this.selectId;
            }
        }
    },
    watch: {
        defaultChecked() {
            this.selectId = this.defaultChecked;
            if (this.catalogList.length > 0) {
                this.catalogList.forEach(item => {
                    if (item.ttId === this.defaultChecked) {
                        this.name = item.ttName;
                        this.$emit('update:resultName', this.name);
                        return false;
                    }
                });
            }
        }
        // showBox() {
        //     if (this.showBox && this.catalogList.length === 0) {
        //         this.getAllCatalogByWctId();
        //     }
        // }
    },
    created() {
        this.getAllCatalogByWctId();
    }
};
</script>

<style scoped lang="less">
    /deep/.van-overlay {
        z-index: 999;
    }
    .catalog-box {
        background: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 600px;
        border-radius: 16px 16px 0 0;
        padding-bottom: 20px;
        .box-border {
            padding: 0 15px;
            .box-title {
                height: 48px;
                display: flex;
                align-items: center;
                &>div:first-child{
                    flex: 1;
                    &>a {
                        padding-right: 10px;
                    }
                }
                &>div:last-child {
                    flex: 1;
                    text-align: right;
                    &>a {
                        padding-left: 10px;
                        color: #ACACAC;
                    }
                }
                &>div:nth-child(2) {
                    flex: 2;
                    text-align: center;
                }
                .btn-class {
                    color: #000 !important;
                }
            }
            /deep/.van-search {
                padding: 0 0 10px 0;
            }
            .box-item-list {
                overflow-y: auto;
                max-height: 400px;
                /deep/.van-loading {
                    text-align: center;
                }
                .box-item {
                    display: flex;
                    align-items: center;
                    height: 50px;
                    &>div:first-child {
                        width: 50px;
                    }
                    &>div:last-child {
                        flex-grow: 1;
                    }
                }
            }
        }
    }
</style>
